<template>
  <div class="flex-column px-w100 home-nav-bar" ref="elRefName">
    <div class="flex-row text-white title">
      <van-image class="flex-shrink m_t5 head-img" round :src="info.headimg"/>
      <div class="font16 p_x5 van-ellipsis">{{ info.currentAllianceGroupName || '暂无商圈信息' }}</div>
    </div>
    <div class="search-area-container">
      <div class="flex-row justify-center align-center text-light search-area" @click="$router.push({name:'search'})">
        <van-icon name="search"/>
        <span>搜索商品</span>
      </div>
    </div>
  </div>
  <div class="home-container">
    <Goods :sticky-offset-top="elHeight" @onChangeHeight="onChangeHeight"/>
  </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue';
import {useElementHeight} from "@/hooks/Sticky";
import Goods from "@/views/home/components/Goods.vue";
import {mapState, useStore} from "vuex";


export default defineComponent({
  name: 'Home',
  components: {
    Goods,
  },
  setup() {
    return {
      ...useElementHeight(),
    }
  },
  computed: {
    ...mapState('personal', [
      'info'
    ])
  },
  async created() {
    const store = useStore();
    await store.dispatch('personal/getInfo')

  },


});
</script>

<style lang="less">
.home-nav-bar {
  position: fixed;
  top: 0;
  z-index: 1;
  height: 120px;
  //background-color: @primaryColor;
  background-color: #F9574F;
  padding: 10px 10px;

  .title {
    line-height: 38px;

    .head-img {
      width: 25px;
      height: 25px;
    }
  }

  .search-area-container {
    padding: 0 10px;

    .search-area {
      background-color: #ffffff;
      width: 100%;
      line-height: 38px;
      border-radius: 40px;
    }
  }

}

.home-container {
  padding-top: 120px;
  padding-bottom: 10px;

}
</style>
